<template>
  <div class="cartbuttombar">
    <check-button
      class="check-button"
      :isitem="isSelectAll"
      @click.native="clickAll"
    ></check-button>
    <span class="all">全选</span>
    <div class="amount">
      <span>合计: {{ totalPrice }}</span>
    </div>
    <div class="count" @click="buyClick">去结算 ({{ checkLength }})</div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkbutton/CheckButton";
import { mapGetters } from "vuex";
export default {
  name: "CartButtomBar",
  data() {
    return {
      buyShop: false,
    };
  },
  computed: {
    ...mapGetters({ Length: "cartLength", list: "cartList" }),
    totalPrice() {
      return (
        "￥" +
        this.list
          .filter((item) => {
            return item.checked; //查找选中为true的商品
          })
          .reduce((preValue, item) => {
            return preValue + item.realprice * item.cont; //将被选中的所有商品+1
          }, 0)
      );
    },
    checkLength() {
      return this.list
        .filter((item) => {
          return item.checked; //查找选中为true的商品
        })
        .reduce((preValue, item) => {
          return preValue + item.cont; //将被选中的所有商品+1
        }, 0);
    },
    /* isSelectAll 判断是否被全部选中 */
    isSelectAll() {
      if (this.list.length === 0) return false; //当没有商品时，全选不显选中

      //1.首先当获取新商品时,list的checked默认为true
      //2.然后!item.checked表示将为true的商品变false，为false的商品变true,item实则保存的是checked为false的商品,
      //3.找到了所有false(没被选中)的商品,然后将其数组取反，也就是false，最后return false，isSelectAll()为false
      //4.将布尔值传入isitem,isitem接收到false,false则css样式不生效
      //5.如果商品全为true,item找不到符合的数组则undefined(没找到)，最后!undefined= true, isSelectAll返回true ，ture则css样式生效
      //可以理解为全true则返回true ，有至少一个false则返回false、
      this.buyShop = this.list.find((item) => item.checked); //有true则返回true，全false则返回false，此变量用于点击去结算
      return !this.list.find((item) => !item.checked);
    },
  },
  methods: {
    clickAll() {
      if (this.isSelectAll) {
        //循环list中所有数组的checked并将所有checked变为false
        this.list.forEach((item) => (item.checked = false));
      } else {
        this.list.forEach((item) => (item.checked = true));
      }
    },
    buyClick() {
      // if(this.buyShop == true){
      //   this.$toast.show('结算')
      // }else if(this.buyShop){
      //   this.$toast.show('请选择商品！')
      // }else if(this.Length == 0){
      //   this.$toast.show('您还没添加商品！')
      // }

      if (this.Length == 0) {
        this.$toast.show("您还没添加商品！快去瞅瞅吧");
      } else if (this.buyShop) {
        this.$toast.show("稍等，正在跳转...",10000);
      } else this.$toast.show("请选择商品！");
    },
  },
  components: {
    CheckButton,
  },
};
</script>

<style  scoped>
.cartbuttombar {
  position: fixed;
  width: 100%;
  height: 40px;
  bottom: 49px;
  background-color: rgb(233, 233, 233);
  text-align: center;
  line-height: 40px;
}
.amount,
.check-button,
.all {
  float: left;
}
.check-button {
  margin: 8px 10px;
}
.amount {
  width: 170px;
  color: black;
}
.count {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(to right, red, rgb(255, 86, 86));
  color: white;
  border-radius: 20px;
  float: right;
  margin: 5px 0px;
  font-size: 14px;
}
.count:active {
  opacity: 0.3;
}
</style>
